<template>
  <div class="title-decorate">
    <!--  {{row}}{{col}}{{diffRow}}{{diffCol}}-->
    <template v-for="rIndex in row">
      <div class="row" :key="rIndex">
        <template v-for="cIndex in col">
          <div class="col" :key="cIndex" v-if="!(rIndex>diffRow&&cIndex>diffCol)"></div>
        </template>
      </div>
    </template>

  </div>
</template>

<script>
export default {
  name: "TitleDecorate",
  props: ['row', 'col', 'diffRow', 'diffCol']
}
</script>

<style lang="scss" scoped>
@import "../assets/style/base";

.title-decorate {
  .row {
    display: flex;

    & + .row {
      margin-top: 2px;
    }

    .col {
      width: 2px;
      height: 2px;
      margin-right: 2px;
      border-radius: 50%;
    }
  }

}
</style>
